<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改页面</title>
    <link rel="stylesheet" href="/static/pengpai/component/pear/css/pear.css" />
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container">

            <input id="qrId" type="hidden" name="qrId" lay-verify="required" lay-reqtext="用户名不能为空" placeholder="请输入参数名" th:value="${qrcode.qrId}" READONLY class="layui-input">

            <div id="chart" style="width: 600px;height:400px;"></div>



        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="button" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                    lay-filter="user-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="pear-btn pear-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="/static/pengpai/component/layui/layui.js"></script>
<script src="/static/pengpai/component/pear/pear.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
<script>
    layui.use(['form', 'jquery'], function() {
        let form = layui.form;
        let $ = layui.jquery;

        form.on('submit(user-save)', function(data) {
            console.log(data)
            $.get("/qrcode/download",data.field,function(r){
                console.info(r.code);
                if(r.code === 200){
                    parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭当前页
                    parent.location.reload();
                }else{
                    layer.msg('提交失败！');
                }
            });
        });

        $.ajax({
            url: "/qrcodeScanRecord/chart?qrId="+$("input#qrId").val(),
            type: "get",
            success: function (result) {
                //渲染树的数据
                console.log(result)
                var myChart = echarts.init(document.getElementById('chart'));

                // 指定图表的配置项和数据
                option = {
                    title: {
                        text: '扫码应用统计',
                        subtext: '',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: result,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

            }
        }   );
    })
</script>
<script>
</script>
</body>
</html>
